<template>
  <div class='personal divider' v-if='userAllInfo'>
    <a target="_blank" :href="origin()+'/personal/index/'+userAllInfo.userId" >
      <e-avatar :src="userAllInfo.iconUrl" :background="true" class="head_portrait" />
    </a>
    <a target="_blank" :href="origin()+'/basic/edit-info'" class="personal-info">
      <!-- <h4 class="ellipsis" :title='userAllInfo.nickName'>
        {{userAllInfo.nickName}}
      </h4> -->
      <h4 class="use-name">
        <span :title='userAllInfo.nickName' >{{userAllInfo.nickName}}</span>
        <i class="iconfont edit-icon" >&#xe64f;</i>
      </h4>
      <img class="pcImgTxtUrl" v-if='userAllInfo.pcImgTxtUrl'  :src="userAllInfo.pcImgTxtUrl"  alt='快去认证吧~'>
      <small v-if="userAllInfo.area" class="weak ellipsis" :title='userAllInfo.area' ><i class="small iconfont">&#xe627;</i>{{userAllInfo.area}}</small>
      <small class="weak ellipsis" :title='userAllInfo.sign' >{{userAllInfo.sign|| '快来添加签名吧~'}}</small>
    </a>
    <el-row class='use-follow'>
      <el-col :span="12" >
        <a target="_blank" :href="origin()+'/basic/follow'">
          <strong>{{userAllInfo.focus || 0}}</strong>
          <small class="weak">关注</small>
        </a>
      </el-col>
      <el-col :span="12">
        <a target="_blank" :href="origin()+'/basic/follower'">
          <strong>{{userAllInfo.fans || 0}}</strong>
          <small class="weak">粉丝</small>
        </a>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { getLocationOrigin } from 'utils/index'
  export default {
    props: {
      userAllInfo: {
        type: Object,
        required: true
      }
    },
    methods: {
      origin () {
        return getLocationOrigin()
      }
    }
  }
</script>

<style lang="scss">

.personal{
  line-height:1;
  text-align:center;
  background-image: url('~static/images/personal_bg.png');
  background-repeat: no-repeat;
  padding: 30px 10px 25px 10px;
  .head_portrait{
    display:inline-block;
    width:74px;
    height:74px;
    margin:0 auto;
    border: 3px solid #fff;
    border-radius:100%;
    background-repeat: no-repeat;
    background-position:center center;
    background-size: cover;
  }
  .ellipsis {
    display:block;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  }
  .personal-info{
    display:block;
    small{
      height: 14px;
      margin:20px 0;
      .iconfont{
        margin-right:4px;
      }
    }
    // h4{
    //   box-sizing: content-box;
    //   font-size:18px;
    //   padding: 10px 0;
    //   font-weight: normal;
    // }

    .use-name{
      box-sizing: content-box;
      font-size:18px;
      height: 22px;
      line-height: 22px;
      padding: 10px 0;
      span{
        display:inline-block;
        max-width:calc(100% - 34px);
        overflow:hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        margin-right:10px;
      }
      .edit-icon{
        font-size: 18px;
        vertical-align: top;
        color:rgba(255,255,255,1);
      }
    }
    .pcImgTxtUrl{
      height: 14px;
    }
    &:hover .use-name{
      .edit-icon{
        color:#333;
      }
    }


  }
  .use-follow{
    a{
      display:block;
      strong{
        display:block;
        padding-bottom:6px;
      }
    }
  }
}
</style>
